<template>
  <a-card title="最近30天登录" :bodyStyle=bodyStyle>
    <div
      v-infinite-scroll="handleInfiniteOnLoad"
      class="demo-infinite-container"
      :infinite-scroll-disabled="busy"
      :infinite-scroll-distance="10"
    >
      <a-list :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <span>{{item.creator_name}}</span>
          <span>通过</span>
          <span>{{ item.request_ip }}</span>
          <span>登录</span>
        </a-list-item>
        <div v-if="loading && !busy" class="demo-loading-container">
          <a-spin/>
        </div>
      </a-list>

    </div>
  </a-card>
</template>
<script>
  import infiniteScroll from 'vue-infinite-scroll'
  import * as api from '@/api/system/logManage'

  export default {
    directives: { infiniteScroll },
    data() {
      return {
        bodyStyle: { padding: '0 0 0 10px', Height: '250px' },
        data: [],
        loading: false,
        busy: false
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        api.getPage({ request_modular: '登录模块', time: this.getDatetime(), pageSize: 999 }).then((res) => {
          this.data = res.data.rows
        })
      },
      getDatetime() {
        const tempDate = new Date() // 获取今天的日期
        tempDate.setDate(tempDate.getDate() - 30) // 今天的前N天的日期，N自定义
        return tempDate.getFullYear() + '-' + (tempDate.getMonth() + 1) + '-' + tempDate.getDate() + ' ' + '12:00:00'
      },
      handleInfiniteOnLoad() {
        const data = this.data
        this.loading = true
        if (data.length > 999) {
          this.$message.warning('已经加载全部~')
          this.busy = true
          this.loading = false
          return
        }
        this.fetchData()
        this.loading = false
      }
    }
  }
</script>
<style>
  .demo-infinite-container {
    overflow: auto;
    padding: 8px 24px;
    height: 300px;
  }

  .demo-loading-container {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
  }
</style>